invoice type toggle

1 files changed, 40 insertions, 3 deletions

diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index ad9721e7..b5571f23 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -1,12 +1,14 @@
 <script>
+	import { enhance } from '$app/forms';
 	import { send } from '$lib/socket';
-	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
+	import { post, back, copy, f, get, types, sat, reverseFormat, s, sats } from '$lib/utils';
 	import { tick, onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import { last } from '$lib/store';
 	import { Avatar, Icon, Heart, Image } from '$comp';
 	import { t } from '$lib/translations';
 	import screenfull from 'screenfull';
+	import { goto, invalidate } from '$app/navigation';
 
 	export let data;
 
@@ -21,18 +23,19 @@
 		prompt,
 		text,
 		tip,
+		request_id,
 		user: { username, currency }
 	} = invoice;
 
 	let showQr = !amount;
 
-	let src = sm;
+	$: src = sm;
 
 	let qr;
 	let tipPercent = 0;
 
 	let refresh = (data) => {
-		({ invoice, id } = data);
+		({ invoice, id, user, sm, lg } = data);
 		({
 			amount,
 			hash,
@@ -71,9 +74,43 @@
 		if (full) src = lg;
 		else src = sm;
 	};
+
+	let toggleType = async () => {
+		invoice.type = invoice.type === types.lightning ? types.bitcoin : types.lightning;
+		({ hash } = await post(`/${username}/invoice`, {
+			invoice,
+			user: { username, currency }
+		}));
+
+		goto(`./${hash}`, { invalidateAll: true });
+	};
 </script>
 
 <div class="container mx-auto max-w-lg px-4 space-y-5">
+	<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+		<button
+			class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+			class:bg-black={type === types.lightning}
+			class:text-white={type === types.lightning}
+			on:click={toggleType}
+		>
+			⚡️ Lightning
+		</button>
+
+		<button
+			class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center "
+			class:bg-black={type === types.bitcoin}
+			class:text-white={type === types.bitcoin}
+			on:click={toggleType}
+		>
+			<img
+				src="/images/bitcoin.svg"
+				class="my-auto w-8 border-4 border-transparent"
+				alt="Bitcoin"
+			/>
+			<div class="my-auto">Bitcoin</div>
+		</button>
+	</div>
 	<div class="relative flex">
 		<div class="flex mx-auto w-[360px] h-[360px]">
 			<img